<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="querySerch">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-form-item>
        <el-form-item label="" prop="resource">
          <el-col :span="12">
            <el-upload
              ref="upload"
              class="upload-demo"
              action="http://localhost:80/shop/import/excel"
              :on-success="onSuccessFile">
              <el-button type="primary">导入</el-button>
            </el-upload>
          </el-col>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pageData.rows" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="expand">
        <template slot-scope="props">
          <!--     TODO 下拉数据     -->
          <el-table :data="props.row.auditLogs" style="width: calc(100% - 47px)" class="two-list">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="state" label="状态" width="100" :formatter="formatSex" sortable>
              <!--scope：可以获取当前这一行的数据  -->
              <template scope="scope">
                <span style="color: red" v-if="scope.row.state === -1">驳回</span>
                <span style="color: #11b95c" v-else-if="scope.row.state === 1">通过</span>
              </template>
            </el-table-column>
            <el-table-column prop="note" label="备注"></el-table-column>
            <el-table-column prop="auditId" label="审核人员"></el-table-column>
            <el-table-column prop="auditTime" label="审核时间"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="店铺名称" width="120" sortable>
      </el-table-column>
      <el-table-column prop="tel" label="联系电话" width="150" sortable>
      </el-table-column>
      <el-table-column prop="registerTime" label="注册时间" width="150" sortable>
      </el-table-column>
      <el-table-column prop="state" label="状态" width="80" sortable>
        <template scope="scope">
          <span v-if="scope.row.state==1" style="color: green">审核通过</span>
          <span v-if="scope.row.state==0" style="color: blue">待审核</span>
          <span v-if="scope.row.state==-1" style="color: red">驳回</span>
          <span v-if="scope.row.state==2" style="color: #2be8ad">激活</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址" min-width="120" sortable>
      </el-table-column>
      <el-table-column prop="logo" label="图标" min-width="180" sortable>
        <template scope="scope">
          <el-image :src="'http://123.207.27.208'+scope.row.logo"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="admin.username" label="店长" min-width="80" sortable>
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" :disabled="scope.row.state !==0" @click="handleAudit(scope.$index, scope.row)">审核
          </el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="pageData.totals"
                     style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增修改界面-->
    <el-dialog :title="title" :visible.sync="shopVisible" :close-on-click-modal="false">
      <el-form :model="shop" label-width="80px" :rules="shopFormRules" ref="shopForm">
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="shop.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="tel">
          <el-input v-model="shop.tel" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="shop.state">
            <el-radio class="radio" :label="0">待审核</el-radio>
            <el-radio class="radio" :label="1">审核通过</el-radio>
            <el-radio class="radio" :label="-1">驳回</el-radio>
            <el-radio class="radio" :label="2">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="shop.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item prop="logo" label="店铺Logo">
          <el-upload
            class="upload-demo"
            action="http://localhost:80/fastDfs/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <!--        <el-form-item label="店长">
                  <el-select v-model="shop.employee" placeholder="请选择" value-key="id">
                    <el-option
                        v-for="employee in employees"
                        :key="employee.id"
                        :label="employee.username"
                        :value="employee">
                      <span style="float: left">{{ employee.username }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ employee.department.name }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>-->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="deleteBlurWarn">取消</el-button>
        <el-button type="primary" @click.native="save" :loading="shopLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--店铺审核界面-->
    <el-dialog title="审核店铺" :visible.sync="shopAuditVisible" :close-on-click-modal="false">
      <el-form :model="shopAuditLog" label-width="80px" ref="shopAuditLogForm">
        <el-form-item label="备注" prop="note">
          <el-input type="textarea" v-model="shopAuditLog.note"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click.native="auditPass">通过</el-button>
        <el-button type="danger" @click.native="auditReject">驳回</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>

export default {
  data() {
    return {
      title: '',
      auditLogs: [],
      employees: [],
      filters: {
        name: ''
      },
      fileList: [],
      pageData: {
        totals: 0,
        rows: []
      },
      currentPage: 1,
      pageSize: 5,
      keyword: "",
      query: {
        currentPage: 1,
        pageSize: 5,
        keyword: ""
      },
      listLoading: false,
      sels: [],//列表选中列

      shopVisible: false,//编辑界面是否显示
      shopAuditVisible: false,//编辑界面是否显示
      shopLoading: false,
      shopFormRules: {
        name: [
          {required: true, message: '请输入店铺名称', trigger: 'blur'}
        ]
      },
      //编辑界面数据
      shopAuditLog: {
        shopId: null,
        note: null
      },
      //编辑界面数据
      shop: {
        id: null,
        name: '',
        tel: '',
        registerTime: null,
        state: 0,
        address: '',
        logo: '',
        employee: null
      }

    }
  },
  methods: {
    // 获取店铺下拉数据
    auditLogInDetail() {
      this.$http.get("/shopAuditLog/auditLog")
        .then(result => {
          console.log(result)
          this.auditLogs = result.data
        })
        .catch(result => {
          this.$message({
            message: '查询下拉失败!',
            type: 'error'
          });
        })
    },
    // 导入成功之后消除文件列表，并给出提示
    onSuccessFile() {
      this.$refs.upload.clearFiles();
      this.$message({
        message: '导入成功',
        type: 'success'
      });
    },
    // Excel导出
    exportExcel() {
      // 同步请求
      location.href = "http://localhost:80/shop/export/excel";
    },
    //文件上传成功回调
    handleSuccess(response, file, fileList) {
      this.shop.logo = response.resultObj;
      this.fileList = fileList;
    },
    //文件删除
    handleRemove(file, fileList) {
      var filePath = file.response.resultObj;
      this.$http.delete("/fastDfs/?filePath=" + filePath)
        .then(res => {
          if (res.data.success) {
            this.$message({
              message: '删除成功!',
              type: 'success'
            });
          } else {
            this.$message({
              message: '删除失败!',
              type: 'error'
            });
          }
        })
    },
    //图片预览
    handlePreview(file) {
      console.log(file);
    },
    auditReject() {
      // 存到session中
      sessionStorage.setItem('shopId', JSON.stringify(this.shopAuditLog.shopId));

      this.$http.post("/shop/audit/reject", this.shopAuditLog)
        .then(result => {
          result = result.data;
          if (result.success) {
            this.$message({
              message: '驳回Ok',
              type: 'success'
            });
          } else {
            this.$message({
              message: '驳回失败',
              type: 'error'
            });
          }
          this.shopAuditVisible = false;
          this.getpagelist();
        })
    },
    auditPass() {
      this.$http.post("/shop/audit/pass", this.shopAuditLog)
        .then(result => {
          result = result.data;
          if (result.success) {
            this.$message({
              message: '审核通过',
              type: 'success'
            });
          } else {
            this.$message({
              message: '审核失败',
              type: 'error'
            });
          }
          this.shopAuditVisible = false;
          this.getpagelist();
        })
    },
    //清除讲校验提示
    deleteBlurWarn() {
      this.shopVisible = false
    },
    //性别显示转换
    formatSex: function (row, column) {
      return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getpagelist();
    },
    //删除
    handleDel: function (index, row) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        let para = {id: row.id};
        this.$http.delete("/shop/" + para.id).then((res) => {
          this.listLoading = false;
          //NProgress.done();
          this.currentPage = 1;
          this.getpagelist();
        }).catch(
          alert(res.data.message)
        );
      }).catch(() => {

      });
    },
    //显示编辑界面
    handleEdit: function (index, row) {
      this.title = "编辑"
      this.shopVisible = true;
      this.shop = Object.assign({}, row);
      this.getEmployees()
    },
    //显示审核界面
    handleAudit: function (index, row) {
      this.shopAuditVisible = true;
      console.log(row)
      this.shopAuditLog.shopId = row.id;
    },
    //显示新增界面
    handleAdd: function () {
      this.title = "新增"
      this.shopVisible = true;
      this.getEmployees()
      this.shop = {
        id: null,
        name: '',
        tel: '',
        registerTime: null,
        state: 1,
        address: '',
        logo: '',
        employee: null
      };
    },
    //保存
    save: function () {
      this.$refs.shopForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.shopLoading = true;
            //NProgress.start();
            let para = Object.assign({}, this.shop);
            console.log(para)

            this.$http.put("/shop", para)
              .then((res) => {
                this.shopLoading = false;
                //NProgress.done();
                if (res.data.success) {
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });
                  this.$refs['shopForm'].resetFields();
                  this.shopVisible = false;
                  this.getpagelist();
                } else {
                  this.$message({
                    message: res.data.message,
                    type: 'error'
                  });
                }
              });
          });
        }
      });
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
    //批量删除
    batchRemove: function () {
      var ids = this.sels.map(item => item.id);
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.listLoading = true;
        //NProgress.start();
        this.$http.patch("/shop", ids)
          .then((res) => {
            this.listLoading = false;
            //NProgress.done();
            if (res.data.success) {
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            } else {
              this.$message({
                message: res.data.message,
                type: 'error'
              });
            }

            this.querySerch();
          });
      }).catch(() => {

      });
    },
    //高级查询
    querySerch() {
      this.currentPage = 1
      this.getpagelist()
    },
    //获取所有用户
    getEmployees() {
      this.$http.get("/emp").then(res => {
        if (res) {
          this.employees = res.data
        }
      })
    },

    //获取分页列表店铺
    getpagelist() {
      let para = {
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        keyword: this.keyword
      };
      this.$http.post("/shop/list", para).then(res => {
        console.log(res)
        console.log(res.data)
        console.log(res.data.rows)
        this.pageData = res.data;
      })
    }
  },
  mounted() {
    this.getpagelist();
  }
}

</script>

<style scoped>

</style>
